<template>
  <el-scrollbar style="height: 100%">
    <div class="right-nav-group">
      <template v-for="(item,index) in datas">
        <div class="echart-nav-item" :class="[{'echart-nav-active':componentTag === item.comp}]" :key="index"
             @click="echartTemplateTap(item)">
          <img class="echart-nav-img" :src="item.img" :alt="item.name" :title="item.name">
        </div>
      </template>
    </div>
  </el-scrollbar>
</template>

<script>
import resize from '@/components/mixins/resize'

export default {
  name: "RightNavGroup",
  mixins: [resize],
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    },
    componentTag: {
      type: String,
      default: ''
    }
  },
  methods: {
    echartTemplateTap(item) {
      if (item.comp === this.componentTag) {
        return false
      }
      this.$emit('compChange',item)
      // this.componentTag = item.comp
    }
  }
}
</script>

<style scoped lang="scss">
  .right-nav-group {

    .echart-nav-item {
      cursor: pointer;
      padding: 0 5px;
      font-size: 0;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;

      }

      .echart-nav-img {
        width: 100%;
        border: solid 2px transparent;
        border-radius: 6px;
        opacity: 0.7;
        transition: all 0.3s;

        &:hover {
          opacity: 1;
          border: solid 2px #0694ce;

        }
      }

      &.echart-nav-active {

        .echart-nav-img {
          opacity: 1;
          border: solid 2px #0694ce;

        }
      }
    }
  }
</style>